<template>
  <div id="Box">
    <div class="menu">
      <h4>功能列表</h4>
      <ul>
        <li v-for="item in routes">
          <router-link :to="item.path"> {{ item.name }}</router-link>
        </li>
      </ul>
    </div>

    <div class="content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import { routes } from "./router";
</script>

<style scoped lang="less">
#Box {
  display: flex;
  height: 100vh;

  h4 {
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border-bottom: 1px solid #686868;
  }
  .menu {
    width: 248px;
    height: 100%;
    border-right: 1px solid #bdbdbd;

    li {
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #b3b3b3;
    }
  }
  .content {
    flex-grow: 1;
    position: relative;
    height: 100%;
  }
}
</style>
